<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="scheduler.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="scheduler.js"></script>
    <script>
      $(document).ready(function(){
        var dateObj = new Date();
        
        var data = '{"Activities" :['
                  + '{ "StartDate": "07042016", "EndDate": "07042016", "Description": "Test 1" },'
                  + '{ "StartDate": "07042016", "EndDate": "07062016", "Description": "Test 2" },'
                  + '{ "StartDate": "07202016", "EndDate": "07212016", "Description": "Test 3" },'
                  + '{ "StartDate": "07122016", "EndDate": "07152016", "Description": "Test 4" },'
                  + '{ "StartDate": "06182016", "EndDate": "06182016", "Description": "Test 5" } ]}';
        
        //var parsedData = JSON.parse(data);
        
        var parsedData = { Activities: [
                            {
                              StartDate: new Date(2016, 6, 4),
                              EndDate: new Date(2016, 6, 4),
                              Description: "Test 1"
                            },
                            {
                              StartDate: new Date(2016, 6, 4),
                              EndDate: new Date(2016, 6, 6),
                              Description: "Test 2"
                            },
                            {
                              StartDate: new Date(2016, 6, 8),
                              EndDate: new Date(2016, 6, 12),
                              Description: "Test 3"
                            },
                            {
                              StartDate: new Date(2016, 6, 12),
                              EndDate: new Date(2016, 6, 15),
                              Description: "Test 4"
                            },
                            {
                              StartDate: new Date(2016, 5, 18),
                              EndDate: new Date(2016, 5, 18),
                              Description: "Test 5"
                            }
                         ]};
        
        $("#mySchedule").ToSchedule({
          data: parsedData,
          month: dateObj.getMonth(),
          year: dateObj.getFullYear()
        });
        
        $("#prev").click(function(){
          dateObj = new Date(dateObj.getFullYear(), dateObj.getMonth() - 1, 1);
          $("#mySchedule").ToSchedule({
            data: parsedData,
            month: dateObj.getMonth(),
            year: dateObj.getFullYear()
          });
        });
        
        $("#next").click(function(){
          dateObj = new Date(dateObj.getFullYear(), dateObj.getMonth() + 1, 1);
          $("#mySchedule").ToSchedule({
            data: parsedData,
            month: dateObj.getMonth(),
            year: dateObj.getFullYear()
          });
        });
      });
    </script>
  </head>
  <body>
    <input type="button" id="prev" value="<<" />
    <input type="button" id="next" value=">>" />
    <div id="mySchedule">
    </div>
  </body>
</html>
